<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    {{ }} 我们称之为 vuejs 提供的插值表达式，可以把 vuejs 管理的 data 的数据插入到 使用的地方。
</div>
<div>
    {{ }} 里面到底可以写哪些内容？
</div>
<p>
    1. 可以写 data 里面的数据
</p>
<p>
    2. 可以直接写 字面量数据
</p>
<p>
    3. 可以进行条件表达式
</p>
<p>
    4. 可以进行三目运算
</p>
<p>
    5. 系统函数的调用
</p>

<div id="app">
    <h2>{{ title }}</h2>
    <hr>
    <h2>数组的单个元素的展示</h2>
    <p>{{ arr }}</p>
    <p>{{ arr[0] }} </p>
    <p>{{ arr[1] }} </p>
    <p>{{ arr[2] }} </p>
    <hr>
    <h2>数组的元素的遍历(循环)展示</h2>
    <p>
        v-for 是vuejs 提供的指令，可以完成复合数据类型的
        遍历操作，也就是可以使用 v-for 进行复合数据的循环展示

    </p>
    <p>
        特点：v-for 在做循环的时候，数组里面的元素有多少个，则
        v-for 所在的dom结构就循环多少次。在每次做循环的时候
        会把数组的当前元素赋值给 ele 这个标识符（ele标识符用户自定义）
    </p>
    <ul>
        <li v-for="ele in arr">{{ ele }}</li>
    </ul>
    <hr>
    <ul>
        <li v-for="val in arr">{{ val }}</li>
    </ul>
    <hr>
    <h2>数组的元素和下标的遍历(循环)展示</h2>

    <ul>
        <li v-for="(val, index) in arr">下标：{{index}}，元素：{{ val }}</li>
    </ul>


</div>


</body>

<script src="lib/vue/vue.js"></script>

<script type="text/javascript">

    const vm = new Vue({
        // el 是一个选择器，这里使用的 #app 就是第二步定义的 vuejs 管理区域的 id选择器
        el: '#app',

        // vuejs 管理的数据
        data: {
            // 基本数据类型
            title: 'vuejs 复合数据类型展示',
            // 复合数据类型（对象类型）
            arr: [2, 23, 34],
            obj: {id: 12, name: 'mark', age: 23},
            list: [
                {id: 12, name: 'mark', age: 23},
                {id: 13, name: 'andy', age: 24},
            ]
        }
    })

    console.log(vm);


</script>

</html>
